<!doctype html>
<html>
<head>
<meta charset="utf-8">

<link id="css" href="style1.css" rel="stylesheet"/>
<title>車牌辨識</title>
</head>
<!-- -->
<body>



<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="ddslick.js"></script>
<script language="javascript">
////for develop mode
//var IMG_URL = getParameter('image');
var IMG_URL = 'moto.jpg';
	SPACE = 10,
	SRC_WIDTH = 300,
	SRC_HEIGHT = 239,
	DST_WIDTH = 300,//465 - SRC_WIDTH - SPACE * 3,
	DST_HEIGHT = 100;// - SRC_HEIGHT - SPACE * 3;
	FinalDST_WIDTH = 300,//465 - SRC_WIDTH - SPACE * 3,
	FinalDST_HEIGHT = 100;// - SRC_HEIGHT - SPACE * 3;
	

var img,
	canvas,
	//new canvas add
	canvas_store,
	context_store,
		
	//
	context,
	points,
	srcImageData,
	draggingPoint = null,
	draggingDstPoint = null,
	draggingFinalDstPoint = null,
	
	selectedDraggingDstPoint,
	scaleLeftTopPoint = null,
	scaleRightBottomPoint = null,
	wheelEvent = "false", wheelCnt=0;
	
	var ltPoint;		//left-top point
	var	rbPoint;		//right-bottom point
	var isScale;		//boolean whether scale larger 
	var scaleValue;		//percent value of scale
	//var ctx,dst,ctx_store,finalDst;
	var xAxisOfFinalDstLine;
	var yAxisOfFinalDstLine;
	var numLineOfFinalDst;
	var beforeDashCharCnt=0;
	
	var finalDstImg ;       //Implement Binarization  by Mandy
	var finalDstImgWidth;
	var finalDstImgheight;
	
	var specialData = [
    {
        text: "普通重型機車",
        value: 1,
        selected: false,
        description: "7碼(前英3, 後數4)",
        imageSrc: "./images1/automobile/0.jpg"
    },
    {
        text: "大型重型機車",
        value: 2,
        selected: false,
        description: "黃底黑字,7碼(前英3, 後數4)",
        imageSrc: "./images1/automobile/1.jpg"
    },
    {
        text: "輕型機車",
        value: 3,
        selected: false,
        description: "綠底白字,7碼(前英3, 後數4)",
        imageSrc: "./images1/automobile/2.jpg"
		
    },
    {
        text: "小型輕型機車",
        value: 4,
        selected: false,
        description: "白底紅字,7碼(前英3, 後數4)",
        imageSrc:"./images1/automobile/3.jpg"
    },
    {
        text: "自用小客車",
        value: 5,
        selected: false,
        description: "7碼(前英3, 後數4)",
        imageSrc:"./images1/automobile/4.jpg"
    },
    {
        text: "營業小客車",
        value: 6,
        selected: false,
        description: "白底紅字,6碼(前英3，後數3)",
        imageSrc:"./images1/automobile/5.jpg"
    },
    {
        text: "遊覽大客車",
        value: 7,
        selected: false,
        description: "紅底白字,6碼(前英3, 後數3)",
        imageSrc:"./images1/automobile/6.jpg"
    }
	];
	
window.addEventListener('DOMContentLoaded', function() {

	canvas = document.getElementById('c');
	context = canvas.getContext('2d');
	//***** add ****//	
	canvas_store = document.getElementById('new');
	context_store = canvas_store.getContext('2d');
	//**************//
	
	/****************Mandy add*******************************/
	srcBounds = new Rect(SPACE + 50, SPACE / 2 | 0 + 200, SRC_WIDTH, SRC_HEIGHT);
	dstBounds = new Rect(srcBounds.right() + 65 + SPACE, srcBounds.y , DST_WIDTH, DST_HEIGHT);
	finalDstBounds = new Rect(SPACE + 50, dstBounds.y + DST_HEIGHT + 3*SPACE  + 200 , FinalDST_WIDTH, FinalDST_HEIGHT);
	/****************Mandy end*******************************/
	//**************//
	/*srcBounds = new Rect(SPACE, SPACE / 2 | 0, SRC_WIDTH, SRC_HEIGHT);
	dstBounds = new Rect(srcBounds.right() + SPACE, srcBounds.y, DST_WIDTH, DST_HEIGHT);
	finalDstBounds = new Rect(srcBounds.right() + SPACE, dstBounds.y + DST_HEIGHT + 3*SPACE, FinalDST_WIDTH, FinalDST_HEIGHT);
	*/
	
	ltPoint = new Point(0,0);
	rbPoint = new Point(srcBounds.width, srcBounds.height);
	isScale = false;
	scaleValue = 0.02;


	var bounds = new Rect(0, 0, SRC_WIDTH, SRC_HEIGHT).inflate(-60, -60);
	var dstBountsPoint = new Rect(0, 0, DST_WIDTH, DST_HEIGHT).inflate(-60, -60);
	
	points = [
		bounds.topLeft(),
		bounds.topRight(),
		bounds.bottomRight(),
		bounds.bottomLeft()
	];

  dstPoints = [
  	dstBountsPoint.topLeft(),
		dstBountsPoint.topRight(),
		dstBountsPoint.bottomRight(),
		dstBountsPoint.bottomLeft()
  ];
  
	img = new Image();
	img.addEventListener('load', onImageLoad, false);
	img.src = IMG_URL;

  	//hcf
  	numLineOfFinalDst = 5;	//5 line for 6 areas
	xAxisOfLine = [0,0,0,0,0,0,0,0];	//leftest and rightest are bounds
	var xLen = Math.abs(dstPoints[1].x-dstPoints[0].x);
	var yLen = Math.abs(dstPoints[2].y-dstPoints[1].y); 
	var temp = xLen/(numLineOfFinalDst+1);	
	for (i=1; i<=numLineOfFinalDst+1; i++) {
		xAxisOfLine[i] = temp*i;
	}
	//--  	
	
	canvas.addEventListener('mousemove', onCanvasMouseMove, false);
	canvas.addEventListener('mousedown', onCanvasMouseDown, false);
	canvas.addEventListener('mouseup', onCanvasMouseUp, false);
	canvas.addEventListener('mouseout', onCanvasMouseUp, false);
	//canvas.addEventListener('DOMMouseScroll', MouseWheelHandler, false);
	if (canvas.addEventListener) {
			// IE9, Chrome, Safari, Opera
			canvas.addEventListener("mousewheel", MouseWheelHandler, false);
			// Firefox
			canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
	}
	// IE 6/7/8
	else canvas.attachEvent("onmousewheel", MouseWheelHandler);
	
}, false);

function onImageLoad(e) {
	
	
	//canvas.width = 700;
	//canvas.height = 250;
	/************Mandy edit***********/
	canvas.width = 800;
	canvas.height = 700;
	/*********************************/

	context.drawImage(img, srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
	context.fillStyle = context.strokeStyle = 'yellow';//'cyan';
	context.lineWidth = 1;
	context.font = '10px sans-serif';
	context.textBaseline = 'top';
	//alert("srcBounds.x:"+srcBounds.x+",srcBounds.y:"+srcBounds.y+",srcBounds.width:"+srcBounds.width+",srcBounds.height:"+srcBounds.height);
	srcImageData = context.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);	
	hideAllCharListBox();
	//預設選擇車牌長度6碼=>2-4
	//lengthListBoxOnChange("1");
	//setCharListBox("1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21");
	update();	
}

function MouseWheelHandler(e){
		var e = window.event || e; // old IE support
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
		//alert(delta);
		
		if(delta > 0){
				//scaleX /= 1.05;
				//scaleY /= 1.05;										
				wheelEvent = "add";
				wheelCnt++;
				update();
		}else{
				//scaleLeftTopPoint = new Point(0.05*srcBounds.width, 0.05*srcBounds.height);
				//scaleRightBottomPoint = new Point(0.95*srcBounds.width, 0.95*srcBounds.height);
			
				//var x = scaleBasePoint.x-(scaleX*1.1)*0.05*srcBounds.width;
				//var y = scaleBasePoint.y-(scaleY*1.1)*0.05*srcBounds.height;
				
				//if(scaleBasePoint.x<=0 || scaleBasePoint.y<=0){
				if (isScale == false){
				
					
				}else{
					//scaleX *= 1.05;
					//scaleY *= 1.05;					
					wheelEvent = "reduce";
					wheelCnt--;
					update();
				}
				
		}

		//if(scaleX < 1) scaleX = 1;
		//if(scaleY < 1) scaleY = 1;
		//prevent to scroll the browser window
		e.returnValue = false;
	    if (e.preventDefault) e.preventDefault();
	        return false;
		
}

function onCanvasMouseMove(e) {
	if (draggingPoint) {
		var p = draggingPoint;

		p.x = handleEvent(e,"X") - srcBounds.x;
		p.y = handleEvent(e,"Y") - srcBounds.y;

		if (p.x < 0) p.x = 0;
		else if (p.x > srcBounds.width) p.x = srcBounds.width;
		if (p.y < 0) p.y = 0;
		else if (p.y > srcBounds.height) p.y = srcBounds.height;
		update();
	}
	if (draggingDstPoint) {
		var p = draggingDstPoint;

		p.x = handleEvent(e,"X") - dstBounds.x;
		p.y = handleEvent(e,"Y") - dstBounds.y;

		if (p.x < 0) 
			p.x = 0;
		else if (p.x > dstBounds.width) 
			p.x = dstBounds.width;
		
		if (p.y < 0) 
			p.y = 0;
		else if (p.y > dstBounds.height) 
			p.y = dstBounds.height;
		
		var x,y,p1;
		if(selectedDraggingDstPoint==0){
				x = draggingDstPoint.x;
				y = draggingDstPoint.y;
				p1 = dstPoints[2];	
		}else if(selectedDraggingDstPoint==1){
				x = dstPoints[3].x;
				y = draggingDstPoint.y;
				p1 = dstPoints[3];	
		}else if(selectedDraggingDstPoint==2){
				x = dstPoints[0].x;
				y = dstPoints[0].y;
				p1 = dstPoints[0];
				
		}else if(selectedDraggingDstPoint==3){
				x = draggingDstPoint.x;
				y = dstPoints[0].y;
				p1 = dstPoints[1];
				
		}
		/*var p1;	
		if(selectedDraggingDstPoint!=2)
			p1 = dstPoints[(selectedDraggingDstPoint+2)%4];
		else
			p1 = dstPoints[2];
		
		var x = dstPoints[0].x;
		var y = dstPoints[0].y;*/
			
		var tmp = new Rect(x, y, Math.abs(p.x-p1.x), Math.abs(p.y-p1.y));
		
		//alert(tmp.topLeft().x+","+tmp.topLeft().y);
		
		dstPoints[0] = tmp.topLeft();
		dstPoints[1] = tmp.topRight();
		dstPoints[2] = tmp.bottomRight();
		dstPoints[3] = tmp.bottomLeft();
		
		//hcf
		///*
		var originLen = xAxisOfLine[numLineOfFinalDst+1];
		var xLen = Math.abs(dstPoints[1].x-dstPoints[0].x);
		
		if (xLen < 50){		//too small
			var item = xLen/(numLineOfFinalDst+1);	
			for (i=1; i<=numLineOfFinalDst+1; i++)
				xAxisOfLine[i] = item*i;
		}
		else {
			for (i=1; i<=numLineOfFinalDst; i++) {
					xAxisOfLine[i] = xAxisOfLine[i]*xLen/originLen;
			}
			xAxisOfLine[numLineOfFinalDst+1] = xLen;
		}	
		//*/		
		
		update();
	}
	
	//hcf
	///*
	if (draggingFinalDstPoint>=0){	
		xAxisOfLine[draggingFinalDstPoint] = handleEvent(e,"X") - finalDstBounds.x;
		if (xAxisOfLine[draggingFinalDstPoint] < xAxisOfLine[draggingFinalDstPoint-1]+5) 	//not a good way when value is fixed to 5
			xAxisOfLine[draggingFinalDstPoint] = xAxisOfLine[draggingFinalDstPoint-1]+5;
		if (xAxisOfLine[draggingFinalDstPoint] > xAxisOfLine[draggingFinalDstPoint+1]-5) 
			xAxisOfLine[draggingFinalDstPoint] = xAxisOfLine[draggingFinalDstPoint+1]-5;		
		update();
	}
	//*/
	
	if(scaleLeftTopPoint!=null && scaleRightBottomPoint==null && handleEvent(e,"X") >=srcBounds.x && handleEvent(e,"X") <= (srcBounds.x+srcBounds.width) && handleEvent(e,"Y")>=srcBounds.y &&handleEvent(e,"Y") <= (srcBounds.y+srcBounds.height)){
			var movePoint = new Point(handleEvent(e,"X") - srcBounds.x, handleEvent(e,"Y") - srcBounds.y);
			update(movePoint);
	}
	
}

function onCanvasMouseUp(e) {
	if(draggingPoint==null && draggingDstPoint==null && scaleLeftTopPoint!=null){
			if(handleEvent(e,"X") >=srcBounds.x && handleEvent(e,"X") <= (srcBounds.x+srcBounds.width) && handleEvent(e,"Y")>=srcBounds.y &&handleEvent(e,"Y") <= (srcBounds.y+srcBounds.height)){
					scaleRightBottomPoint = new Point(handleEvent(e,"X") - srcBounds.x, handleEvent(e,"Y") - srcBounds.y);
					if(Math.abs(scaleRightBottomPoint.x-scaleLeftTopPoint.x)>10 && Math.abs(scaleRightBottomPoint.y-scaleLeftTopPoint.y)>10)
							update();
			}
	}
	
	
	draggingPoint = null;
	draggingDstPoint = null;
	draggingFinalDstPoint = -1;
}

function onCanvasMouseDown(e) {
	
	//fred??
	/*if(e.clientX < srcBounds.x || e.clientX > (dstBounds.x+dstBounds.width) || e.clientY < dstBounds.y || e.clientY > (finalDstBounds.y+finalDstBounds.height)){
			alert("123");
			return;
	}*/
	
	
	var i, len, p, dx, dy;

	for (i = 0, len = points.length; i < len; i++) {
		p = points[i];

		dx = p.x - handleEvent(e,"X") + srcBounds.x;
		dy = p.y - handleEvent(e,"Y") + srcBounds.y;

		if (dx * dx + dy * dy < 100) {
			draggingPoint = p;
			p.x = handleEvent(e,"X") - srcBounds.x;
			p.y = handleEvent(e,"Y") - srcBounds.y;
			break;
		}
	}
	
	for (i = 0, len = dstPoints.length; i < len; i++) {
		p = dstPoints[i];

		dx = p.x - handleEvent(e,"X") + dstBounds.x;
		dy = p.y - handleEvent(e,"Y") + dstBounds.y;

		if (dx * dx + dy * dy < 100) {
			draggingDstPoint = p;
			selectedDraggingDstPoint = i;
			p.x = handleEvent(e,"X") - dstBounds.x;
			p.y = handleEvent(e,"Y") - dstBounds.y;
			break;
		}
	}
	
	//hcf
	///*
	var xLen, yLen;
	for (i=1; i<=numLineOfFinalDst; i++) {
		xLen = Math.abs(dstPoints[1].x-dstPoints[0].x);
		yLen = Math.abs(dstPoints[2].y-dstPoints[1].y);
		
		if ((handleEvent(e,"X")-finalDstBounds.x > xLen) || (handleEvent(e,"Y")-finalDstBounds.y > yLen))
			continue;
		
		dx = Math.abs(handleEvent(e,"X") - finalDstBounds.x - xAxisOfLine[i]);
		if (dx<5) {
			draggingFinalDstPoint = i;
			break;
		}
	}	
	//*/
	
	scaleLeftTopPoint = null;
	scaleRightBottomPoint = null;
	if(draggingPoint==null && draggingDstPoint==null){
		  if(handleEvent(e,"X") >=srcBounds.x && handleEvent(e,"X") <= (srcBounds.x+srcBounds.width) && handleEvent(e,"Y") >=srcBounds.y && handleEvent(e,"Y") <= (srcBounds.y+srcBounds.height))
					scaleLeftTopPoint = new Point(handleEvent(e,"X") - srcBounds.x, handleEvent(e,"Y") - srcBounds.y);
	}
}

function getCharPosition(){
	var position = "";
	//var xLen = Math.abs(dstPoints[1].x-dstPoints[0].x);
	for (var i=1; i<numLineOfFinalDst; i++) {
		position += xAxisOfLine[i]+" ";
		//ctx.moveTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y);
		//ctx.lineTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y + Math.abs(dstPoints[2].y-dstPoints[1].y));
	}
	position += xAxisOfLine[numLineOfFinalDst];
	//alert(position);
	return position;
}

//return 編碼:　是否為新式車牌(7碼) 是否為白字　車牌碼數Dash前碼數
//如0062: 非新式車牌　非白字　6碼　Dash前有2碼
function getPlateFormat(){
		var totalCharCnt = numLineOfFinalDst + 1;
		var plateFormat = "";
		
		if(totalCharCnt==7) 
			plateFormat+="1";
		else 
			plateFormat+="0";
			
		plateFormat += getCheckBoxChecked("whiteWordCheckBox");
		plateFormat += totalCharCnt;
		plateFormat += beforeDashCharCnt;
	  return plateFormat;	
}

//每個位置的選擇字元以,區別，位置之間以;區別 
//如return  D,G,1;Q,8,0,P;
function getSelectedChars(){
	var selectedChars="";
	var id;
	for(var j=1;j<=numLineOfFinalDst + 1;j++){
			id = j+"Char";
			for (var i = 0 ; i < listBoxCnt[id]-1; i++) {
					selectedChars += document.getElementById(id).options[i].value + ","
			}
			selectedChars += document.getElementById(id).options[listBoxCnt[id]-1].value + ";"		
	}
	alert("selectedChars:"+selectedChars);
	return selectedChars;
}
//selectedChars: A,C,E,W,7,5,2,.....
//目前3個為一個車號字元的可能集合
function setCharListBox(selectedChars){
	var candidateCntEachChar = 3;
	//selectedCharsArray: 7,4,2,...,E,A,
	//selectedCharsArray.length: 7*candidateCntEachChar+1
	//selectedCharsArray最後一個元素為空字串
	var selectedCharsArray = selectedChars.split(",");
	//listBoxCnt["1Char"]
	for(var i=1;i<=7;i++)
			deleteAllListBoxValue(i+"Char");
	
	//由於selectedCharsArray最後一個元素為空字串，所以只讀到i<selectedCharsArray.length-1
	for(var i=0;i<selectedCharsArray.length-1;i++){
			var AddOpt = new Option(selectedCharsArray[i], selectedCharsArray[i]);
			var id = Math.floor(i/candidateCntEachChar+1)+"Char";
			//alert(id);
			document.getElementById(id).options[listBoxCnt[id]++] = AddOpt;
	}
	
}
//for develop mode
function predictLPNumber(){
	var candidateCntEachChar = 3;
	//selectedCharsArray: 7,4,2,...,E,A,
	//selectedCharsArray.length: 7*candidateCntEachChar+1
	//selectedCharsArray最後一個元素為空字串
	//var selectedCharsArray = selectedChars.split(",");
	var selectedCharsArray=["1","2","3","4","5","6","7","8","9","0","Q","A","Z","W","S","X","E","D"];
	//listBoxCnt["1Char"]
	for(var i=1;i<=7;i++)
			deleteAllListBoxValue(i+"Char");
	
	//由於selectedCharsArray最後一個元素為空字串，所以只讀到i<selectedCharsArray.length-1
	for(var i=0;i<selectedCharsArray.length-1;i++){
			var AddOpt = new Option(selectedCharsArray[i], selectedCharsArray[i]);
			var id = Math.floor(i/candidateCntEachChar+1)+"Char";
			//alert(id);
			document.getElementById(id).options[listBoxCnt[id]++] = AddOpt;
	}
}
//for develop mode
function analysisLPNumber(){
	var str = "LFJ-5JX,LFJ-57X,LFJ-SJX,LFJ-S7X,LFJ-1JX,LFJ-17X,LTJ-5JX,LTJ-57X,LFJ-5TX,LFJ-5EX,LFJ-JJX,LPJ-5JX,LFJ-59X,LJJ-5JX,LFJ-52X,LFJ-J7X,LPJ-57X,LFJ-5GX,LFJ-YJX,LFJ-PJX,LFJ-8JX,LJJ-57X,L8J-5JX,LFJ-Y7X,LF1-5JX,LFJ-P7X,LFJ-87X,L9J-5JX,LTJ-SJX,L8J-57X,L7J-5JX,LF1-57X,LFS-5JX,SFJ-5JX,L9J-57X,LTJ-S7X,L7J-57X,LFJ-STX,JFJ-5JX,LFS-57X,LF7-5JX,LFT-5JX,LFJ-SEX,SFJ-57X,LTJ-1JX,LF8-5JX,LFF-5JX,LPJ-SJX,JFJ-57X,LF7-57X,LFT-57X,LFJ-S9X,LJJ-SJX,LTJ-17X,LF8-57X,LFJ-5JT,LFF-57X,LFJ-1TX,LFJ-S2X,LPJ-S7X,LFJ-SGX,ZFJ-5JX,LFJ-1EX,LJJ-S7X,LFJ-57T,L8J-SJX,LPJ-1JX,LFJ-5JS,ZFJ-57X,LF1-SJX,QFJ-5JX,LFJ-5JZ,LFJ-19X,LJJ-1JX,TFJ-5JX,UFJ-5JX,L9J-SJX,LFJ-12X,L8J-S7X,LPJ-17X,LTJ-5TX,LFJ-1GX,L7J-SJX,LFJ-57S,LF1-S7X,QFJ-57X,LFJ-57Z,LTJ-5EX,LFS-SJX,LJJ-17X,TFJ-57X,LFJ-5JH,SFJ-SJX,UFJ-57X,L8J-1JX,L9J-S7X,LTJ-JJX,LFJ-5JU,L7J-S7X,LFJ-5JC,LF1-1JX,JFJ-SJX,LFS-S7X,LTJ-59X,LF7-SJX,LFT-SJX,LFJ-57H,L9J-1JX,SFJ-S7X,L8J-17X,LF8-SJX,LTJ-52X,LTJ-J7X,L7J-1JX,LFF-SJX,LTJ-5GX,LTJ-YJX,LFJ-57U,LFJ-JTX,LPJ-5TX,LFJ-57C,LF1-17X,JFJ-S7X,LTJ-PJX,LFS-1JX,LTJ-8JX,LF7-S7X,LFJ-JEX,LFT-S7X,LPJ-5EX,SFJ-1JX,L9J-17X,LF8-S7X,LFJ-SJT,LJJ-5TX,L7J-17X,LFF-S7X,LTJ-Y7X,JFJ-1JX,LPJ-JJX,LT1-5JX,LTJ-P7X,LFJ-YTX,LJJ-5EX,ZFJ-SJX,LFS-17X,LTJ-87X,LF7-1JX,LFJ-PTX,LFT-1JX,LFJ-8TX,SFJ-17X,LFJ-J9X,LF8-1JX,LPJ-59X,LJJ-JJX,LFJ-YEX,LFJ-S7T,LFF-1JX,LFJ-PEX,LFJ-J2X,L8J-5TX,LPJ-52X,JFJ-17X,LPJ-J7X,LFJ-8EX,LT1-57X,LFJ-JGX,LFJ-SJS,LPJ-5GX,LPJ-YJX,LTS-5JX,ZFJ-S7X,LJJ-59X,LF1-5TX,LPJ-PJX,LF7-17X,QFJ-SJX,LFJ-SJZ,L8J-5EX,LFT-17X,LPJ-8JX,STJ-5JX,LF8-17X,TFJ-SJX,LFJ-1JT,LJJ-52X,LJJ-J7X,UFJ-SJX,LFJ-Y9X,LJJ-5GX,LFF-17X,LF1-5EX,LJJ-YJX,L8J-JJX,L9J-5TX,LTJ-STX,LFJ-P9X,JTJ-5JX,LJJ-PJX,LFJ-89X,LFJ-Y2X,ZFJ-1JX,L7J-5TX,LFJ-S7S,LJJ-8JX,LPJ-Y7X,LTS-57X,LF1-JJX,LFJ-P2X,LFJ-YGX,LP1-5JX,LT7-5JX,L9J-5EX,LPJ-P7X,QFJ-S7X,LTT-5JX,LFJ-S7Z,LTJ-SEX,LFJ-82X,LFJ-PGX,LFS-5TX,L8J-59X,LPJ-87X,STJ-57X,LT8-5JX,LFJ-8GX,L7J-5EX,TFJ-S7X,LFJ-17T,LFJ-SJH,UFJ-S7X,SFJ-5TX,LTF-5JX,L9J-JJX,L8J-52X,LJJ-Y7X,L8J-J7X,LF1-59X,LFS-5EX,LJ1-5JX,JTJ-57X,L8J-5GX,LFJ-1JS,LJJ-P7X,L8J-YJX,L7J-JJX,LFJ-SJU,ZFJ-17X,LFJ-SJC,LJJ-87X,L8J-PJX,JFJ-5TX,LF1-52X,QFJ-1JX,LF1-J7X,SFJ-5EX,LFJ-1JZ,LP1-57X,LT7-57X,L8J-8JX,LFS-JJX,LF1-5GX,LTT-57X,LPS-5JX,L9J-59X,LF1-YJX,LTJ-S9X,TFJ-1JX,LF7-5TX,LT8-57X,LTJ-5JT,LF1-PJX,UFJ-1JX,LFT-5TX,LFJ-S7H,L7J-59X,JFJ-5EX,SFJ-JJX,SPJ-5JX,L9J-52X,LF1-8JX,LTF-57X,LTJ-1TX,L9J-J7X,LTJ-S2X,LF8-5TX,L9J-5GX,LJ1-57X,L9J-YJX,LTJ-SGX,LFJ-17S,L7J-52X,LFS-59X,LFF-5TX,L8J-Y7X,LF7-5EX,L7J-J7X,LFJ-S7U,LJS-5JX,ZTJ-5JX,LFT-5EX,LPJ-STX,JFJ-JJX,L9J-PJX,LFJ-S7C,L81-5JX,JPJ-5JX,L7J-5GX,L8J-P7X,L7J-YJX,QFJ-17X,LFJ-17Z,LTJ-1EX,L9J-8JX,LF8-5EX,SFJ-59X,LFS-52X,L8J-87X,LFS-J7X,L7J-PJX,SJJ-5JX,LPS-57X,LF1-Y7X,TFJ-17X,LF7-JJX,LFF-5EX,LFS-5GX,LP7-5JX,LFJ-1JH,L7J-8JX,LFT-JJX,LFS-YJX,LPT-5JX,LPJ-SEX,LTJ-57T,LF1-P7X,UFJ-17X,SFJ-52X,SFJ-J7X,LFS-PJX,LF8-JJX,SPJ-57X,JFJ-59X,LP8-5JX,LF1-87X,LJJ-STX,LFJ-5TT,JJJ-5JX,SFJ-5GX,LFS-8JX,SFJ-YJX,LFJ-1JU,LFF-JJX,LTJ-5JS,LPF-5JX,L9J-Y7X,LFJ-1JC,SFJ-PJX,L91-5JX,JFJ-52X,LJS-57X,ZTJ-57X,LF7-59X,LT1-SJX,JFJ-J7X,L9J-P7X,L81-57X,JPJ-57X,LFT-59X,LJ7-5JX,SFJ-8JX,QTJ-5JX,L7J-Y7X,LTJ-5JZ,LJT-5JX,JFJ-5GX,L8S-5JX,LJJ-SEX,L9J-87X,JFJ-YJX,LFJ-5ET,ZFJ-5TX,L71-5JX,LTJ-19X,LF8-59X,L7J-P7X,SJJ-57X,LJ8-5JX,LF7-52X,TTJ-5JX,JFJ-PJX,LF7-J7X,LFT-52X,LP7-57X,LFJ-17H,L7J-87X,LFT-J7X,LFS-Y7X,LFF-59X,LPT-57X,S8J-5JX,UTJ-5JX,LF7-5GX,JFJ-8JX,LJF-5JX,LPJ-S9X,LF7-YJX,LTJ-12X,LFT-5GX,LF8-52X,LFT-YJX,LFS-P7X,LF8-J7X,LFJ-JJT,LP8-57X,LPJ-5JT,ZFJ-5EX,JJJ-57X,LF7-PJX,LTJ-1GX,LF8-5GX,LFS-87X,SFJ-Y7X,LFT-PJX,LFF-52X,LF8-YJX,LFJ-17U,LFF-J7X,L8J-STX,LTJ-57S,LPF-57X,LPJ-1TX,LPJ-S2X,SF1-5JX,LF7-8JX,LFJ-17C,J8J-5JX,LFT-8JX,SFJ-P7X,LFF-5GX,L91-57X,LF8-PJX,LFF-YJX,LT1-S7X,LPJ-SGX,LFJ-5TS,L9S-5JX,LJ7-57X,SFJ-87X,QTJ-57X,LF8-8JX,LTJ-57Z,ZFJ-JJX,LJT-57X,LTS-SJX,L8S-57X,ZPJ-5JX,LFF-PJX,JFJ-Y7X,LJJ-S9X,L71-57X,LF1-STX,L87-5JX,LFJ-59T,JF1-5JX,L8T-5JX,LFF-8JX,LJ8-57X,QFJ-5TX,L8J-SEX,LJJ-5JT,L7S-5JX,TTJ-57X,LPJ-1EX,LFJ-5TZ,JFJ-P7X,LTJ-5JH,S9J-5JX,STJ-SJX,S8J-57X,UTJ-57X,L88-5JX,JFJ-87X,LJF-57X,LJJ-1TX,LJJ-S2X,LF7-Y7X,LFJ-5ES,TFJ-5TX,LFJ-52T,LFT-Y7X,LFJ-J7T,LPJ-57T,S7J-5JX,UFJ-5TX,L8F-5JX,LJJ-SGX,LF7-P7X,LF1-SEX,ZFJ-59X,LFJ-5GT,L9J-STX,LFT-P7X,LF8-Y7X,LTJ-5JU,LFJ-YJT,QFJ-5EX,J9J-5JX,ZJJ-5JX,LFJ-						5EZ,LTJ-5JC,SF1-57X,LF7-87X,LT1-1JX,JTJ-SJX,J8J-57X,LFT-87X,LF8-P7X,LFJ-PJT,SFS-5JX,LFF-Y7X,LFJ-JJS,LJJ-1EX,LPJ-5JS,L7J-STX,TFJ-5EX,ZFJ-52X,L9S-57X,J7J-5JX,LF8-87X,LFJ-8JT,ZFJ-J7X,LTS-S7X,ZPJ-57X,LFF-P7X,UFJ-5EX,L97-5JX,LP1-SJX,L9T-5JX,LT7-SJX,QFJ-JJX,L87-57X,ZFJ-5GX,L9J-SEX,QPJ-5JX,LFJ-JJZ,JF1-57X,LTT-SJX,ZFJ-YJX,LPJ-5JZ,L8T-57X,LFF-87X,LJJ-57T,L7S-57X,LFS-STX,LTJ-57H,L8J-S9X,S9J-57X,LPJ-19X,JFS-5JX,L98-5JX,L77-5JX,STJ-S7X,ZFJ-PJX,LT8-SJX,TFJ-JJX,L88-57X,L7T-5JX,L8J-5JT,TPJ-5JX,L7J-SEX,LFJ-5TH,UFJ-JJX,ZFJ-8JX,LFJ-59S,L9F-5JX,UPJ-5JX,S7J-57X,L78-5JX,SFJ-STX,LTF-SJX,LJJ-5JS,L8F-57X,L8J-1TX,L8J-S2X,LPJ-12X,LF1-S9X,LTJ-57U,LTJ-JTX,LFJ-Y7T,J9J-57X,ZJJ-57X,LFS-SEX,LTJ-57C,LJ1-SJX,QFJ-59X,LT1-17X,JTJ-S7X,L7F-5JX,L8J-SGX,LFJ-59Z,LF1-5JT,LPJ-1GX,QJJ-5JX,LFJ-52S,LFJ-P7T,LJJ-5JZ,SFS-57X,LFJ-J7S,LTS-1JX,Z8J-5JX,LFJ-5TU,LPJ-57S,LJJ-19X,J7J-57X,LFJ-5TC,LFJ-5EH,SF7-5JX,LF1-1TX,JFJ-STX,TFJ-59X,LF1-S2X,LFJ-87T,LFJ-5GS,SFT-5JX,LFJ-YJS,SFJ-SEX,L97-57X,TJJ-5JX,L8J-1EX,LP1-S7X,QFJ-52X,LFJ-52Z,L9T-57X,UFJ-59X,LT7-S7X,QFJ-J7X,QPJ-57X,LFJ-J7Z,LTJ-JEX,LF1-SGX,LTT-S7X,ZFJ-Y7X,LPJ-57Z,LPS-SJX,UJJ-5JX,L9J-S9X,STJ-1JX,SF8-5JX,LFJ-PJS,QFJ-5GX,ZF1-5JX,LFJ-5GZ,LJJ-12X,JFS-57X,QFJ-YJX,L98-57X,L9J-5JT,TFJ-52X,L77-57X,LFJ-YJZ,LF7-STX,ZFJ-P7X,LT8-S7X,LFJ-8JS,TFJ-J7X,LTJ-SJT,L7T-57X,LFJ-5EU,L8J-57T,TPJ-57X,JF7-5JX,LFJ-JJH,LFT-STX,SFF-5JX,LPJ-5JH,LFJ-5EC,UFJ-52X,JFT-5JX,L7J-S9X,LJJ-1GX,QFJ-PJX,LF1-1EX,JFJ-SEX,TFJ-5GX,LFJ-PJZ,UFJ-J7X,ZFJ-87X,L9F-57X,SPJ-SJX,L9J-1TX,UPJ-57X,L9J-S2X,TFJ-YJX,L78-57X,LTF-S7X,L7J-5JT,LJJ-57S,LF8-STX,QFJ-8JX,UFJ-5GX,JTJ-1JX,JF8-5JX,LFJ-8JZ,UFJ-YJX,L9J-SGX,TFJ-PJX,LJ1-S7X,L8J-5JS,L7F-57X,L7J-1TX,L7J-S2X,LF1-57T,LFS-S9X,LFF-STX,Z9J-5JX,LFJ-JJU,QJJ-57X,LF7-SEX,UFJ-PJX,JFF-5JX,LPJ-5JU,LTJ-YTX,LJJ-57Z,TFJ-8JX,LJS-SJX,ZTJ-SJX,LTS-17X,Z8J-57X,LFJ-JJC,LFT-SEX,LFS-5JT,LPJ-5JC,L81-SJX,LP1-1JX,JPJ-SJX,L7J-SGX,SF7-57X,LT7-1JX,UFJ-8JX,Q8J-5JX,L9J-1EX,LTJ-PTX,LFJ-59H,SFT-57X,L8J-5JZ,LTT-1JX,LFJ-Y7S,Z7J-5JX,TJJ-57X,LF8-SEX,LJJ-5JH,LFS-1TX,SFJ-S9X,LFS-S2X,L8J-19X,LF1-5JS,LTJ-8TX,SJJ-SJX,LPS-S7X,UJJ-57X,STJ-17X,SF8-57X,LFJ-P7S,LTJ-J9X,SFJ-5JT,LT8-1JX,T8J-5JX,L7J-1EX,LFF-SEX,ZF1-57X,LFS-SGX,QFJ-Y7X,LP7-SJX,L9J-57T,LFJ-Y7Z,LTJ-YEX,LFJ-52H,LPT-SJX,LFJ-87S,U8J-5JX,LTJ-S7T,JF7-57X,QF1-5JX,ZFS-5JX,LFJ-J7H,SFF-57X,LPJ-57H,SFJ-1TX,LTF-1JX,LF1-5JZ,SFJ-S2X,LFJ-59U,JFT-57X,L8J-12X,QFJ-P7X,LFJ-P7Z,LTJ-PEX,LFJ-59C,SPJ-S7X,LJJ-5JU,LFJ-5GH,LF1-19X,JFJ-S9X,LP8-SJX,TFJ-Y7X,LTJ-J2X,LFJ-YJH,L7J-57T,LJJ-5JC,LFS-1EX,LFJ-STT,LJ1-1JX,JJJ-SJX,SFJ-SGX,QFJ-87X,JTJ-17X,L8J-1GX,JF8-57X,TF1-5JX,JFJ-5JT,LFJ-87Z,LTJ-8EX,UFJ-Y7X,L9J-5JS,TFJ-P7X,LTJ-JGX,LTJ-SJS,LFJ-PJH,LPF-SJX,L8J-57S,LFJ-52U,UF1-5JX,Z9J-57X,LFJ-J7U,LFJ-52C,UFJ-P7X,JFF-57X,LPJ-57U,L91-SJX,JFJ-1TX,LPJ-JTX,LF1-12X,JFJ-S2X,TFJ-87X,LJS-S7X,ZTJ-S7X,LFJ-J7C,LFJ-8JH,LF7-S9X,LFS-57T,LPJ-57C,SFJ-1EX,L81-S7X,Q9J-5JX,LP1-17X,JPJ-S7X,L7J-5JS,LFJ-5GU,LFT-S9X,LT1-5TX,L9J-5JZ,LJ7-SJX,LT7-17X,QTJ-SJX,UFJ-87X,LFJ-YJU,Q8J-57X,LF7-5JT,LFJ-5GC,LTJ-SJZ,LJT-SJX,L8J-57Z,LF1-1GX,JFJ-SGX,L8S-SJX,LTT-17X,LPS-1JX,LFJ-YJC,L9J-19X,LFT-5JT,Z7J-57X,LFJ-SET,ZFJ-STX,LJJ-57H,L71-SJX,LF8-S9X,LF1-57S,LFJ-PJU,T9J-5JX,Q7J-5JX,SJJ-S7X,LJ8-SJX,LF7-1TX,L7J-5JZ,LF7-S2X,LFJ-PJC,SFJ-57T,LT8-17X,TTJ-SJX,LTJ-1JT,T8J-57X,LF8-5JT,LFT-1TX,LFS-5JS,L8J-5JH,LFT-S2X,LP7-S7X,U9J-5JX,LFJ-8JU,L7J-19X,JFJ-1EX,LPJ-JEX,LFF-S9X,LPT-S7X,S8J-SJX,UTJ-SJX,U8J-57X,LFJ-8JC,SPJ-1JX,L9J-12X,LTJ-Y9X,LF7-SGX,QF1-57X,ZFS-57X,LJF-SJX,T7J-5JX,LTF-17X,LF1-57Z,LT1-5EX,LFT-SGX,LF8-1TX,LFF-5JT,LF8-S2X,ZF7-5JX,QFS-5JX,LJJ-57U,LJJ-JTX,LP8-S7X,LPJ-SJT,LFS-5JZ,U7J-5JX,ZFT-5JX,LTJ-P9X,L9J-1GX,LFJ-Y7H,ZFJ-SEX,LJJ-57C,SFJ-5JS,LJ1-17X,JJJ-S7X,LF8-SGX,TF1-57X,L7J-12X,JFJ-57T,LFS-19X,LFF-1TX,LFF-S2X,LF1-5JH,L9J-57S,L8J-5JU,LF7-1EX,LTJ-89X,LTJ-Y2X,LJS-1JX,ZTJ-1JX,LTJ-S7S,LFJ-P7H,LPF-S7X,ZF8-5JX,LFT-1EX,L8J-5JC,SF1-SJX,TFS-5JX,UF1-57X,L81-1JX,J8J-SJX,JPJ-1JX,L7J-1GX,LFF-SGX,L91-S7X,SFJ-5JZ,LT1-JJX,LTJ-P2X,UFS-5JX,LFJ-87H,LTJ-YGX,Q9J-57X,LF8-1EX,L7J-57S,ZFF-5JX,L9J-57Z,LFJ-STS,L9S-SJX,SFJ-19X,LJ7-S7X,LFS-12X,QTJ-S7X,LFJ-Y7U";
	alert(str);	
}
function update(movePoint) {
	var ctx = context;
	var i, len, p, dx, dy;
	//******add*****//
	var ctx_store=context_store;
	//**************//
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	//ctx.drawImage(img, 100, 100, 100, 100, srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
	if(wheelEvent=="add"){					
			
			if (rbPoint.x - ltPoint.x > 2*scaleValue*srcBounds.width){
				ltPoint.x += scaleValue*srcBounds.width;
				rbPoint.x -= scaleValue*srcBounds.width;				
			}
			
			if (rbPoint.y - ltPoint.y > 2*scaleValue*srcBounds.height){	
				ltPoint.y += scaleValue*srcBounds.height;
				rbPoint.y -= scaleValue*srcBounds.height;
			}			
			
			ctx.drawImage(img, ltPoint.x, ltPoint.y, (rbPoint.x-ltPoint.x), (rbPoint.y-ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);			
			//ctx.drawImage(img, x, y, scaleX*(scaleRightBottomPoint.x-scaleLeftTopPoint.x), scaleY*(scaleRightBottomPoint.y-scaleLeftTopPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
			srcImageData = ctx.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
			
					
			isScale = true;
			wheelEvent = "false";
	}else if(wheelEvent=="reduce"){
				
				ltPoint.x -= scaleValue*srcBounds.width;
				ltPoint.y -= scaleValue*srcBounds.height;
				rbPoint.x += scaleValue*srcBounds.width;
				rbPoint.y += scaleValue*srcBounds.height;			
				if (ltPoint.x < 0)
					ltPoint.x = 0;
				if (ltPoint.y < 0)
					ltPoint.y = 0;
				if (rbPoint.x > srcBounds.width)
					rbPoint.x = srcBounds.width;
				if (rbPoint.y > srcBounds.height)
					rbPoint.y = srcBounds.height;				
				if (ltPoint.x==0 && ltPoint.y==0 && rbPoint.x==srcBounds.width && rbPoint.y==srcBounds.height)
					isScale = false; 
				 
				ctx.drawImage(img, ltPoint.x, ltPoint.y, (rbPoint.x-ltPoint.x), (rbPoint.y-ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height); 
				//ctx.drawImage(img, x, y, scaleX*(rbPoint.x-ltPoint.x), scaleY*(rbPoint.y-ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
				srcImageData = ctx.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
				
				wheelEvent = "false";
	}else if((scaleLeftTopPoint!=null && scaleRightBottomPoint!=null)){
			var smallX, smallY, bigX, bigY;
			
			if (scaleLeftTopPoint.x > scaleRightBottomPoint.x){
				smallX = scaleRightBottomPoint.x;
				bigX = scaleLeftTopPoint.x;
			}else{
				smallX = scaleLeftTopPoint.x;			
				bigX = scaleRightBottomPoint.x;
			}
			if (scaleLeftTopPoint.y > scaleRightBottomPoint.y){
				smallY = scaleRightBottomPoint.y;
				bigY = scaleLeftTopPoint.y;
			}else{
				smallY = scaleLeftTopPoint.y;
				bigY = scaleRightBottomPoint.y;			
			}	
				
			var lengthX = rbPoint.x - ltPoint.x;
			var lengthY = rbPoint.y - ltPoint.y;
			
			ltPoint.x += lengthX*smallX/srcBounds.width;
			ltPoint.y += lengthY*smallY/srcBounds.height;
			rbPoint.x = ltPoint.x + lengthX*(bigX-smallX)/srcBounds.width;
			rbPoint.y = ltPoint.y + lengthY*(bigY-smallY)/srcBounds.height;
			
			ctx.drawImage(img, ltPoint.x, ltPoint.y, (rbPoint.x-ltPoint.x), (rbPoint.y-ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
			//ctx.drawImage(img, scaleX*scaleLeftTopPoint.x+scaleBasePoint.x, scaleY*scaleLeftTopPoint.y+scaleBasePoint.y, scaleX*Math.abs(scaleRightBottomPoint.x-scaleLeftTopPoint.x), scaleY*Math.abs(scaleRightBottomPoint.y-scaleLeftTopPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);			
			srcImageData = ctx.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
			
			isScale = true;
	
	}else{
	// 入力?像
			ctx.putImageData(srcImageData, srcBounds.x, srcBounds.y);
			
	}	

	// 出力?像
	var dst = homographyTransform(srcImageData, DST_WIDTH, DST_HEIGHT, points[0], points[1], points[2], points[3]);
	
	
	
	
	//alert((dstPoints[0].x+dstBounds.x)+","+ (dstPoints[0].y+dstBounds.y)+","+ (dstPoints[1].x-dstPoints[0].x)+","+ (dstPoints[2].y-dstPoints[0].y));
	
	
	ctx.putImageData(dst, dstBounds.x, dstBounds.y);
	var finalDst = context.getImageData(dstPoints[0].x+dstBounds.x, dstPoints[0].y+dstBounds.y, (dstPoints[1].x-dstPoints[0].x), (dstPoints[2].y-dstPoints[0].y));
	
	//**************Mandy 2015/03/19 add ***************//
	finalDstImg = context_store;
	finalDstImg.putImageData(finalDst, 0, 0);
	finalDstImgWidth = dstPoints[1].x-dstPoints[0].x;
	finalDstImgHeight = dstPoints[2].y-dstPoints[0].y;
	
  	ctx.putImageData(finalDst, finalDstBounds.x, finalDstBounds.y);
	//*********new canvas *********//
 	ctx_store.putImageData(finalDst, 0, 0);
	// ????
	ctx.beginPath();
	for (i = 0, len = points.length; i < len; i++) {
		p = points[i];
		ctx.moveTo(p.x + srcBounds.x, p.y + srcBounds.y);
		ctx.arc(p.x + srcBounds.x, p.y + srcBounds.y, 4, 0, Math.PI * 2, false);
	}
	
	for (i = 0, len = dstPoints.length; i < len; i++) {
		p = dstPoints[i];
		ctx.moveTo(p.x + dstBounds.x, p.y + dstBounds.y);
		ctx.arc(p.x + dstBounds.x, p.y + dstBounds.y, 4, 0, Math.PI * 2, false);
	}
	
	
	
	ctx.fill();

	// ?????位置
	for (i = 0, len = points.length; i < len; i++) {
		p = points[i];
		ctx.fillText(
			i === 0 ? 'top, left' : i === 1 ? 'top, right' : i === 2 ? 'bottom, right' : 'bottom, left',
			p.x + srcBounds.x + 5, p.y + srcBounds.y + 5
		);
	}
	ctx.fill();

	// ???
	ctx.beginPath();
	for (i = 0, len = points.length; i < len; i++) {
		p = points[i];
		ctx[i === 0 ? 'moveTo' : 'lineTo'](p.x + srcBounds.x, p.y + srcBounds.y);
	}
	
	
	
	ctx.closePath();
	
	
	
	ctx.fillStyle = "rgba(255,255,0,0.1)";
	ctx.fill();
	ctx.fillStyle = 'yellow';
	ctx.stroke();
	
	
	ctx.beginPath();
	for (i = 0, len = dstPoints.length; i < len; i++) {
		p = dstPoints[i];
		ctx[i === 0 ? 'moveTo' : 'lineTo'](p.x + dstBounds.x, p.y + dstBounds.y);
		
	}
	ctx.closePath();
	
	//hcf - update()
	
	if ( document.getElementById("lengthListBox").selectedIndex != 0){
		for (i=1; i<=numLineOfFinalDst; i++) {
			ctx.moveTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y);
			ctx.lineTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y + Math.abs(dstPoints[2].y-dstPoints[1].y));
		}
	}
	//--
	
	//ctx.fill();
	//ctx.closePath();
	ctx.fillStyle = "rgba(255,255,0,0.1)";
	ctx.fill();
	ctx.fillStyle = 'yellow';
	ctx.stroke();
	
	
	if(scaleLeftTopPoint!=null && movePoint!=null){
			ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
			/****************Mandy add*******************************/
			ctx.fillRect(scaleLeftTopPoint.x + 50, scaleLeftTopPoint.y + 200, movePoint.x-scaleLeftTopPoint.x, movePoint.y-scaleLeftTopPoint.y);
			/****************Mandy end*******************************/
			ctx.fillStyle = 'yellow';
	}
}


//press to store
function copy(filePath)
{
	//alert("uploadLPImage");
	canvas_store.width = dstPoints[1].x-dstPoints[0].x;
	canvas_store.height =dstPoints[2].y-dstPoints[0].y;
	scaleLeftTopPoint = null,
	scaleRightBottomPoint = null,
	wheelEvent = "false"
	update();
	//alert(canvas_store.width+","+canvas_store.height);
	var dataURL = canvas_store.toDataURL();
	    $.ajax({
	  	type: "POST",
	  	url: "saveCanvas.php",
	  	data: { 
	     		imgBase64: dataURL,
	     		filePath: filePath
	  	      }
	    }).done(function(o) {
					//alert(o);  	
		
	   });	
}


/**
 * homographyTransform
 *
 * @param {ImageData} src
 * @param {Number} dstWidth
 * @param {Number} dstHeight
 * @param {Point} p0
 * @param {Point} p1
 * @param {Point} p2
 * @param {Point} p3
 * @return ImageData
 */
function homographyTransform(src, dstWidth, dstHeight, p0, p1, p2, p3) {
	var sx, sy, dx1, dy1, dx2, dy2,
		z, g, h,
		m0, m1, m2, m3, m4, m5, m6, m7,
		srcWidth, srcHeight, srcPixels,
		dst, dstPixels,
		x, y, yi, u, v, t, dx, dy, i, j;

	sx = p0.x - p1.x + p2.x - p3.x;
	sy = p0.y - p1.y + p2.y - p3.y;
	dx1 = p1.x - p2.x;
	dy1 = p1.y - p2.y;
	dx2 = p3.x - p2.x;
	dy2 = p3.y - p2.y;

	z = dx1 * dy2 - dy1 * dx2;
	g = (sx * dy2 - sy * dx2) / z;
	h = (sy * dx1 - sx * dy1) / z;

	m0 = p1.x - p0.x + g * p1.x;
	m1 = p3.x - p0.x + h * p3.x;
	m2 = p0.x;
	m3 = p1.y - p0.y + g * p1.y;
	m4 = p3.y - p0.y + h * p3.y;
	m5 = p0.y;
	m6 = g;
	m7 = h;

	srcWidth  = src.width;
	srcHeight = src.height;
	srcPixels = src.data;

	dst = context.createImageData(dstWidth, dstHeight);
	dstPixels = dst.data;

	for (y = 0; y < dstHeight; y++) {
		yi = y * dstWidth;
		for (x = 0; x < dstWidth; x++) {
			i = (yi + x) << 2;
			u = x / dstWidth;
			v = y / dstHeight;
			t = m6 * u + m7 * v + 1;
			dx = (m0 * u + m1 * v + m2) / t;
			dy = (m3 * u + m4 * v + m5) / t;
			if (dx >= 0 && dx < srcWidth && dy >= 0 && dy < srcHeight) {
				j = ((dy | 0) * srcWidth + (dx | 0)) << 2;
				dstPixels[i]     = srcPixels[j];
				dstPixels[i + 1] = srcPixels[j + 1];
				dstPixels[i + 2] = srcPixels[j + 2];
			}
			dstPixels[i + 3] = 255;
		}
	}

	return dst;
}

function getParameter(name){
	if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
	    return decodeURIComponent(name[1]);
} 
 
function initial(){
		draggingPoint = null;
		draggingDstPoint = null;
		selectedDraggingDstPoint=null;
		scaleLeftTopPoint = null;
		scaleRightBottomPoint = null;
		//scaleX=1;
		//scaleY=1;
		wheelEvent = "false";
		wheelCnt=0;
		ltPoint = new Point(0,0);
		rbPoint = new Point(srcBounds.width, srcBounds.height);
		isScale = false;
		scaleValue = 0.02;
		//scaleBasePoint = new Point(0,0);
		
		
		var bounds = new Rect(0, 0, SRC_WIDTH, SRC_HEIGHT).inflate(-60, -60);
		var dstBountsPoint = new Rect(0, 0, DST_WIDTH, DST_HEIGHT).inflate(-60, -60);
		points = [
			bounds.topLeft(),
			bounds.topRight(),
			bounds.bottomRight(),
			bounds.bottomLeft()
		];

  	dstPoints = [
  		dstBountsPoint.topLeft(),
			dstBountsPoint.topRight(),
			dstBountsPoint.bottomRight(),
			dstBountsPoint.bottomLeft()
  	];
		context.drawImage(img, srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
		srcImageData = context.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
		
		draggingFinalDstPoint = -1;
		var xLen = Math.abs(dstPoints[1].x-dstPoints[0].x);
		var yLen = Math.abs(dstPoints[2].y-dstPoints[1].y); 
		var temp = xLen/(numLineOfFinalDst+1);	
		for (i=1; i<=numLineOfFinalDst+1; i++) {
			xAxisOfLine[i] = temp*i;
		}
		
		update();
}

function initialCharSelect(){
		draggingPoint = null;
		draggingDstPoint = null;
		selectedDraggingDstPoint=null;
		scaleLeftTopPoint = null;
		scaleRightBottomPoint = null;
		//scaleX=1;
		//scaleY=1;
		
		
		var xLen = Math.abs(dstPoints[1].x-dstPoints[0].x);
		var yLen = Math.abs(dstPoints[2].y-dstPoints[1].y); 
		var temp = xLen/(numLineOfFinalDst+1);	
		for (i=1; i<=numLineOfFinalDst+1; i++) {
			xAxisOfLine[i] = temp*i;
		}
		update();
}

/**
 * Point
 */
function Point(x, y) {
	this.x = x || 0;
	this.y = y || 0;
}

/**
 * Rect
 */
function Rect(x, y, width, height) {
	this.x = x || 0;
	this.y = y || 0;
	this.width = width || 0;
	this.height = height || 0;
}

Rect.prototype.right = function() { return this.x + this.width; };
Rect.prototype.bottom = function() { return this.y + this.height; };

Rect.prototype.topLeft = function() { return new Point(this.x, this.y); };
Rect.prototype.topRight = function() { return new Point(this.x + this.width, this.y); };
Rect.prototype.bottomLeft = function() { return new Point(this.x, this.y + this.height); };
Rect.prototype.bottomRight = function() { return new Point(this.x + this.width, this.y + this.height); };

Rect.prototype.inflate = function(dx, dy) {
	var rect = this.clone();

	rect.x -= dx * 0.5;
	rect.y -= dy * 0.5;
	rect.width += dx;
	rect.height += dy;

	return rect;
};

Rect.prototype.clone = function(dx, dy) {
	return new Rect(this.x, this.y, this.width, this.height);
};

/***************************add/delete License Plate Chars**********************************/
var listBoxCnt = new Object();
listBoxCnt["1Char"] = 0;
listBoxCnt["2Char"] = 0;
listBoxCnt["3Char"] = 0;
listBoxCnt["4Char"] = 0;
listBoxCnt["5Char"] = 0;
listBoxCnt["6Char"] = 0;
listBoxCnt["7Char"] = 0;



function addListBoxValue(listBoxId) {
		//var v = document.getElementById("txtValue").value;
		if(listBoxCnt[listBoxId]>=7){
				alert("最多選擇7種可能的字元");
				return false;
		}
		
		var sourceListBox = document.getElementById("sourceListBox");
		var index = sourceListBox.selectedIndex;
		var v = sourceListBox.options[index].value;
		
		for (var i = 0 ; i < listBoxCnt[listBoxId]; i++) {
				if(document.getElementById(listBoxId).options[i].value == v){
							alert("選擇重覆的字元，請重新選擇");
							return false;
				}
		}
		
		var AddOpt = new Option(v, v);
		document.getElementById(listBoxId).options[listBoxCnt[listBoxId]++] = AddOpt;
		return true;
}
function deleteListBoxValue(listBoxId) {
		var s = 1;
		var index;
		if (document.getElementById(listBoxId).selectedIndex == -1) {
					alert("請選擇欲刪除的字元");
					return true;
		}
		while (s > 0) {
				index = document.getElementById(listBoxId).selectedIndex;
				if (index >= 0) {
						document.getElementById(listBoxId).options[index] = null;
						--listBoxCnt[listBoxId];
				}else{
						s = 0;
				}
		}
		return true;
}

function deleteAllListBoxValue(listBoxId) {
		while (listBoxCnt[listBoxId] >= 0) {
						document.getElementById(listBoxId).options[listBoxCnt[listBoxId]] = null;
						--listBoxCnt[listBoxId];
		}
		listBoxCnt[listBoxId] = 0;
		return true;
}
function hideAllCharListBox(){
		document.getElementById("sourceListBox").style.display = 'none';
  	for(var i=1;i<=7;i++){
    		document.getElementById(i+"CharAddButton").style.display = 'none';
    		document.getElementById(i+"Char").style.display = 'none';
    		document.getElementById(i+"CharDelButton").style.display = 'none';
  	}		
}
function showCharListBox(max){
		document.getElementById("sourceListBox").style.display = 'inline';
  	for(var i=1;i<=max;i++){
    		document.getElementById(i+"CharAddButton").style.display = 'inline';
        document.getElementById(i+"Char").style.display = 'inline';
        document.getElementById(i+"CharDelButton").style.display = 'inline';
    }
}	
//--
function lengthListBoxOnChange(index)
{	  
	hideAllCharListBox();
  
  switch (index) {
     case "0":
       break;
			
     case "1"://6碼=>2-4
     		showCharListBox(6);
      	numLineOfFinalDst = 5;
      	beforeDashCharCnt = 2;
      	/****************Mandy add*******************************/			
				document.getElementById("image").src = "./images1/ex1.png";
				/********************************************************/	
      	break;
     case "2"://6碼=>4-2
     		showCharListBox(6);
     		numLineOfFinalDst = 5;
     		beforeDashCharCnt = 4;
     		/****************Mandy add*******************************/			
				document.getElementById("image").src = "./images1/ex2.png";
				/********************************************************/
      	break;
     case "3"://6碼=>3-3
        showCharListBox(6); 
     		numLineOfFinalDst = 5;
     		beforeDashCharCnt = 3;
     		/****************Mandy add*******************************/			
				document.getElementById("image").src = "./images1/ex3.png";
				/********************************************************/
      	break;
     case "4"://7碼=>3-4
        showCharListBox(7); 
     		numLineOfFinalDst = 6;
     		beforeDashCharCnt = 3;
     		/****************Mandy add*******************************/			
				document.getElementById("image").src = "./images1/ex4.png";
				/********************************************************/
      	break;
     case "5"://5碼=>2-3
        showCharListBox(5); 
     		numLineOfFinalDst = 4;
     		beforeDashCharCnt = 2;
     		/****************Mandy add*******************************/			
				document.getElementById("image").src = "./images1/ex5.png";
				/********************************************************/
      	break;
     case "6"://5碼=>3-2
        showCharListBox(5); 
    		numLineOfFinalDst = 4;
    		beforeDashCharCnt = 3;
    		/****************Mandy add*******************************/			
				document.getElementById("image").src = "./images1/ex6.png";
				/********************************************************/
      	break;
      case "7"://4碼=>2-2
        showCharListBox(4); 
    		numLineOfFinalDst = 3;
    		beforeDashCharCnt = 2;
    		/****************Mandy add*******************************/			
				document.getElementById("image").src = "./images1/ex7.png";
				/********************************************************/
      	
         
  	}
  	initialCharSelect();
} 
function getListBoxIndex(id){
	return document.getElementById(id).selectedIndex;
}

function getCheckBoxChecked(id){
	if(document.getElementById(id).checked)
			return "1";
	else
			return "0";
}

function getBeforeDashCharCnt(){
	return beforeDashCharCnt;	
}

/****************Mandy add 2015/03/24 卷軸視窗固定座標***********/
function handleEvent(e,type){
 var evt = e ? e:window.event;
 var clickX=0, clickY=0;

 if ((evt.clientX || evt.clientY) &&
     document.body &&
     document.body.scrollLeft!=null) {
  clickX = evt.clientX + document.body.scrollLeft;
  clickY = evt.clientY + document.body.scrollTop;
 }
 if ((evt.clientX || evt.clientY) &&
     document.compatMode=='CSS1Compat' && 
     document.documentElement && 
     document.documentElement.scrollLeft!=null) {
  clickX = evt.clientX + document.documentElement.scrollLeft;
  clickY = evt.clientY + document.documentElement.scrollTop;
 }
 if (evt.pageX || evt.pageY) {
  clickX = evt.pageX;
  clickY = evt.pageY;
 }
 if(type == "X")
 {
    return clickX;
 }
 else if(type == "Y")
 {
   return clickY;
 }
 alert (evt.type.toUpperCase() + ' mouse event:'
  +'\n pageX = ' + clickX
  +'\n pageY = ' + clickY 
  +'\n clientX = ' + evt.clientX
  +'\n clientY = '  + evt.clientY 
  +'\n screenX = ' + evt.screenX 
  +'\n screenY = ' + evt.screenY
 )
}

/****************Mandy add 2015/03/19 二值化********************/
var blackPercent;
function imageLoaded() {
    
	var black = 0;
	var white = 0;
    // Read the width and height of the canvas
     width = finalDstImgWidth;
     height = finalDstImgHeight;
	
	 // Get all canvas pixel data
     imageData = finalDstImg.getImageData(0, 0, width, height);
	// Run through the image. 
    // The height of the image.
     for (y = 0; y < height; y++) {
	  // *4 for 4 ints per pixel.
	  // This is an input index.
        inpos = y * width * 4; 
	  // This is an output index.
	  // The width of the image.
        for (x = 0; x < width; x++) {
		// Get the pixel of the red channel.
            r = imageData.data[inpos++]
		// Get the pixel of the green channel.
            g = imageData.data[inpos++]
		// Get the pixel of the blue channel.
            b = imageData.data[inpos++]
		// Get the pixel of the alpha channel.
            a = imageData.data[inpos++]
            // Transform RGB color space to gray scale.
			gray =  (0.299 * r + 0.587 * g + 0.114 * b)
            // This is our threshold. You can change it.
            if ( gray > 120 )
			{
			// Set the pixel is white.
				white= white+1;
			}
			else
			{
			// Set the pixel is black.
				black= black+1;
			}
        } // The closing "The width of the image".
    } // The closing "The height of the image".
	
	// Put pixel data on canvas.
 	blackPercent = black/(white+black)*100;
	//alert(finalDstImgHeight);
	//alert(finalDstImgWidth);
	//alert(black);
	//alert(white);
	//alert((black/(white+black)*100)+'%');
}

/****************Mandy add*******************************/
var page = 1;
var str = "";
function next()
{
	/****fred add*********/
	if(page==2 && getListBoxIndex("lengthListBox")==0){
			alert("請選擇車牌長度");
			return;
	}
	if(page==3){
		 imageLoaded();
	   if(blackPercent <=10  || blackPercent >= 80){
		   		alert("無數值可辨識,選擇的車牌位置不正確或是影像解析度太低");
		   		return;
	   }
	}
	
	if(page==4 && getListBoxIndex("classListBox")==0){
			alert("請選擇牌類");
			return;
	}
	/*********************/
	
	if(page < 5 )
  		page++;	
	
	/*****fred add*******/
	//for develop mode
	if(page==4) predictLPNumber();//parent.predictLPNumber();
	if(page==5) analysisLPNumber();//parent.analysisLPNumber();
	/********************/
	
	show();
}
function backpage()
{
	if(page > 0)
		page--;
	show();
}
function show()
{
  var str = "";  
  
  if(page < 2)
  {
	 document.getElementById("btn-black").innerHTML="重新設定";
  }	
  else
  {
	  document.getElementById("btn-black").innerHTML="上一步";
  }
switch(page)
  {	 
  	   case 0:
	   initial();
	   page = 1;
	   break;
  	   case 1:
	   str = "從車牌影像中，選取辨識目標，<br>執行車牌校正功能。<br><br>目標擷取完整有利於車牌辨識的結果。<br><br>1.還原原始預設，請按重新選取<br>2.目標擷取後請按確認鍵";
	   txt.innerHTML = str;
	   document.getElementById("Progres").style.background= "url('images1/Progres1.png')";
	   document.getElementById("title").style.background="url('images1/title1.png')";
	   var div =  document.getElementById("content4");
	   div.style.top='50px';
	   div.style.height='280px';
	   document.getElementById("explain").style.height='250px';
	   document.getElementById("content2").style.display='none';
	   document.getElementById("content2-1").style.display='none';	   
	   break;		
	   case 2:
	   str = "1.請參考範例圖示延車牌字體邊沿框選<br>2.選擇車牌號碼類型。";
	   txt.innerHTML = str;
	   document.getElementById("content2").style.display='';
	   document.getElementById("content2-1").style.display='';	   
	   var div =  document.getElementById("content4");
	   div.style.top='0px';
	   div.style.height='150px';
	   document.getElementById("explain").style.height='120px';
	   document.getElementById("Progres").style.background= "url('images1/Progres2.png')";
	   document.getElementById("title").style.background="url('images1/title2.png')";
	   document.getElementById('content3').style.display='none';
	   document.getElementById('content3-1').style.visibility='';
	   break;
	   case 3:
	   //imageLoaded();
	   //if(blackPercent > 10  && blackPercent < 80)
	   //{
		   str = "在<b>分割影像</b>中的辨識字體，<br>調整邊緣分割線。";
		   txt.innerHTML = str;
		   document.getElementById('content3').style.display='';
		   document.getElementById('content3-1').style.visibility='hidden';
		   document.getElementById("content5").style.display='none';
		   document.getElementById("content6").style.display='none';
	   //}
	   //else
	   //{
	   //    page = 2;
		 //  alert("無數值可辨識");
	   //}
	   break;
	   case 4:
	   str = "1.挑選適合的字元號碼<br>2.選擇車輛類型，確認後預測車牌組合";
	   txt.innerHTML = str;
	   document.getElementById("content5").style.display='';
	   document.getElementById("content6").style.display='';
	   document.getElementById("Progres").style.background= "url('images1/Progres3.png')";
	   document.getElementById("title").style.background= "url('images1/title3.png')";
	   document.getElementById("btn-next").style.visibility='';
	   break;
	   case 5:
	   str = "點選系統分析後車號，<br>將呈現車號完整資訊。";
	   txt.innerHTML = str;
	   document.getElementById("content5").style.display='';
	   document.getElementById("content6").style.display='';
	   document.getElementById("Progres").style.background= "url('images1/Progres4.png')";
	   document.getElementById("title").style.background= "url('images1/title4.png')";
	   document.getElementById("btn-next").style.visibility='hidden';
	   break;
  }   
}
/****************Mandy end***************************/

</script>
<div id="container">
 <canvas id='c'></canvas>
 <canvas id='new' style="display: none"></canvas> 
</div>
<div id="top"></div>
<div id="Progres">  
</div>
        <div id="header">
        <table id="title" width="100%" border="0">
  			<tbody>
            <tr>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
		</div>
        <div id="content1">
        <table id="img01" width="360px">
  			<tbody>
            <tr>
              <td height="29" style="font-size: medium">車牌影像</td>
            </tr>
            <tr>
              <td height="290">&nbsp;</td>
            </tr>
          </tbody>
        </table>
    </div>
<div id="content2" style='display:none'>
         <table id="img02" width="338px">
  			<tr>
              <td height="29" style="font-size: medium">校正影像</td>
            </tr>
            <tr>
              <td height="130">&nbsp;</td>
            </tr>
        </table>
        </div>
<div id="content2-1" style='display:none'>
         <div id="special">
         <table id="sp" width="338px" border="0">
              <tr>
                <td width="115" valign="middle"><input type="checkbox" id="whiteWordCheckBox">
               <label for="checkbox"><strong>特殊條件</strong></label></td>
			   <td id="specialRuleSelect" style="height:20px;"<td>
              </tr>
           </table>

         
  </div>
   <div id="special2">
  <table id="table2-1" width="185" border="0">
          <tr>
            <td colspan="2" style="font-size: 16px">車牌類型</td>               
          </tr>
          <tr>
            <td colspan="2" align="center">
               <select size="1" id="lengthListBox" style="width:150" onchange="lengthListBoxOnChange(this.options[this.options.selectedIndex].value)">
                 <option value="0">請選擇</option>
                 <option value="1">車牌號碼 6碼=>2-4</option>
                 <option value="2">車牌號碼 6碼=>4-2</option>
                 <option value="3">車牌號碼 6碼=>3-3</option>
                 <option value="4">車牌號碼 7碼=>3-4</option>
                 <option value="5">車牌號碼 5碼=>2-3</option>
                 <option value="6">車牌號碼 5碼=>3-2</option>
                 <option value="7">車牌號碼 4碼=>2-2</option>
               </select>
            </td>
          </tr>
          <tr>
            <td style="font-size: 12px"><input type="checkbox" id="whiteWordCheckBox">
            <label for="checkbox">是否為白色字體 </label>
            
            </td>
            <td rowspan="2" style="font-size: 12px"><span style="font-size: 12px; color: #E00305;"><img id="image2" src="images1/white.png" width="62" height="44" alt=""/></span></td>
          </tr>
          <tr>
               <td height="30" style="font-size: 12px; color: #E00305;" align="right" >(白色字體圖樣)</td>
          </tr>
        </table> 
        <table id="table2-1" width="153" border="0">
            <tr>
              <td style="font-size: 16px">車輛類型</td>  
          </tr>
            <tr>
              <td  style="font-size: 9px">&nbsp;</td>
            </tr>
            <tr>
              <td style="font-size: 14px">&nbsp;&nbsp;牌類&nbsp;&nbsp;&nbsp;&nbsp;
                <select size="1" id="classListBox" style="width:150">
                        <option value="0">請選擇</option>
                        <option value="A">汽車</option>
                        <option value="H">重機</option>
                        <option value="L">輕機</option>
                        <option value="D">臨時汽車</option>
                        <option value="E">臨時重機</option>
                        <option value="F">臨時輕機</option>
                        <option value="T">拖車</option>
                </select>
       		  </td>
            </tr>
            <tr>
            	 <td  style="font-size: 9px">&nbsp;</td>
            </tr>            
            <tr>
               <td style="font-size: 14px">&nbsp;&nbsp;顏色&nbsp;&nbsp;&nbsp;&nbsp;
                <select size="1" id="colorListBox" style="width:150">
                    <!--<option disabled>車色</option>-->
                    <option value="A">紅</option>
                    <option value="B">粉紅</option>
                    <option value="C">深紅</option>
                    <option value="D">橙黃</option>
                    <option value="E">黃</option>
                    <option value="F">淺黃</option>
                    <option value="G">深黃</option>
                    <option value="H">綠</option>
                    <option value="I">淺綠</option>
                    <option value="J">深綠</option>
                    <option value="K">藍</option>
                    <option value="L">淺藍</option>
                    <option value="M">深藍</option>
                    <option value="N">紫</option>
                    <option value="O">淺紫</option>
                    <option value="P">深紫</option>
                    <option value="Q">白</option>
                    <option value="R">灰</option>
                    <option value="S">淺灰</option>
                    <option value="T">深灰</option>
                    <option value="U">棕</option>
                    <option value="V">淺棕</option>
                    <option value="W">深棕</option>
                    <option value="X">黑</option>
                    <option value="Y">銀</option>
                    <option value="Z">彩繪</option>
                    <option value="9">金</option>
            </select>
        </td>
            </tr>
  </table>        
</div>        
</div>
<div id="content3-1" ></div>
        <div id="content3"  style='display:none'>
         <table id="img04" width="360px">
  			<tbody>
            <tr>
              <td height="29" style="font-size: medium">分割影像</td>
            </tr>
            <tr>
              <td height="88">&nbsp;</td>
            </tr>
          </tbody>
        </table>
        </div>
<div id="content4" style='display:'>        	
        	 <div id="explain">
        	   <h1><br>               
        	   <hr>               
      	     </h1>
             <h2 id="txt">從車牌影像中，選取辨識目標，<br>執行車牌校正功能。<br><br>目標擷取完整有利於車牌辨識的結果。<br><br>1.還原原始預設，請按重新選取<br>2.目標擷取後請按確認鍵</h2>
             
</div>
</div>
  <div id="content5"  style='display:none'>
         <table id="img05" width="590px ">
  			<tbody>
            <tr>
              <td height="29" colspan="17" style="font-size: medium">挑選車號 </td>
            </tr>
            <tr>
              <td height="130">
                <select size="5" id="sourceListBox" style="width:150;display: none">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
                <option value="E">E</option>
                <option value="F">F</option>
                <option value="G">G</option>
                <option value="H">H</option>
                <option value="I">I</option>
                <option value="J">J</option>
                <option value="K">K</option>
                <option value="L">L</option>
                <option value="M">M</option>
                <option value="N">N</option>
                <option value="O">O</option>
                <option value="P">P</option>
                <option value="Q">Q</option>
                <option value="R">R</option>
                <option value="S">S</option>
                <option value="T">T</option>
                <option value="U">U</option>
                <option value="V">V</option>
                <option value="W">W</option>
                <option value="X">X</option>
                <option value="Y">Y</option>
                <option value="Z">Z</option>			
        		</select>
    		</td>
            <td>
            	<select id="1Char" multiple ><option value="empty"></select>
            </td>
            <td>    
                <input class="button" type="button" id="1CharDelButton" value="-" onclick="deleteListBoxValue('1Char');" /><br>
                <input class="button" type="button" id="1CharAddButton" value="+" onclick="addListBoxValue('1Char');" />
            </td>
            <td>
                 <select id="2Char" multiple ><option value="empty"></select>     
            </td>
            <td>
                 <input class="button" type="button" id="2CharDelButton" value="-"  onclick="deleteListBoxValue('2Char');" />
                 <input class="button" type="button" id="2CharAddButton" value="+"  onclick="addListBoxValue('2Char');" />
            </td>
            <td>
                <select id="3Char" multiple ><option value="empty"></select>   
             </td>
            <td>
                <input class="button" type="button" id="3CharDelButton" value="-"  onclick="deleteListBoxValue('3Char');" />
                <input class="button" type="button" id="3CharAddButton" value="+"  onclick="addListBoxValue('3Char');" />	
            </td>
            <td>
                <select id="4Char" multiple ><option value="empty"></select>   
             </td>
            <td>
                <input class="button" type="button" id="4CharDelButton" value="-"  onclick="deleteListBoxValue('4Char');" />
                <input class="button" type="button" id="4CharAddButton" value="+"  onclick="addListBoxValue('4Char');" />
            </td>
            <td>
            	<select id="5Char" multiple ><option value="empty"></select>	
            </td>
            <td>
                <input class="button" type="button" id="5CharDelButton" value="-"  onclick="deleteListBoxValue('5Char');" />
                <input class="button" type="button" id="5CharAddButton" value="+"  onclick="addListBoxValue('5Char');" />
            </td>
            <td>
                <select id="6Char" multiple ><option value="empty"></select>	
             </td>
            <td>
                <input class="button" type="button" id="6CharDelButton" value="-"  onclick="deleteListBoxValue('6Char');" />
                <input class="button" type="button" id="6CharAddButton" value="+"  onclick="addListBoxValue('6Char');" />
            </td>
            <td>
                <select id="7Char" multiple ><option value="empty"></select>	
             </td>
            <td>   
                <input class="button" type="button" id="7CharDelButton" value="-"  onclick="deleteListBoxValue('7Char');" />
                <input class="button" type="button" id="7CharAddButton" value="+"  onclick="addListBoxValue('7Char');" />
            </td>
        </tr>
      </tbody>
    </table>
         <h1><strong>預測分析數量</strong>：共&nbsp;N&nbsp;筆結果</h1>
    </div>
    <div id="content6"  style='display: none;'>   
       
    </div> 
    <div id="content7"></div>		
	<div id="footer1"> <button id="btn-black" type="button" onClick='backpage()'><strong>重新設定</strong></button></div>
	<div id="footer2"><button id="btn-next" type="button" onClick='next()'><strong>下一步</strong></button></div>
		 
	<script> 
		$('#specialRuleSelect').ddslick({
		data: specialData,
		width: 230,
		//height: 30,
		imagePosition: "left",
		selectText: "請選擇",
		truncateDescription: true,
		onSelected: function(data){
			//displaySelectedData("3: Callback Function on Dropdown Selection" , data);
			alert(data.selectedData.text);
			alert(data.selectedData.value);
			alert(data.selectedData.description);
			alert(data.selectedData.imageSrc);
		}
		});
	</script>
</body>
</html>
